<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文章详情</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <style>
        h1{
            font-weight: bold;
            text-align: center;
            border-bottom: 1px solid #eaecef;
            padding-bottom: 0.3em;
        }
        span{
            text-align: center;
        }
        pre{
            font-family: 'Microsoft YaHei', 'Arial', 'Heiti SC';
            font-size: 15px;
        }
        .bg_color{
            background-color: #23262E;
        }
    </style>
</head>
<body>
<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md12"><!--列布局-->
            <h1 id="infoTitle"></h1>
            <span id="infoAuthor" class="layui-col-md12"></span>
            <span id="infoSource" class="layui-col-md12"></span>
            <span id="infoTime" class="layui-col-md12"></span>
        </div>
        <div class="layui-col-md12 layui-tab layui-tab-card">
            <ul class="layui-tab-title">
                <li class="layui-this" style="width:50%">正文</li>
                <li style="width:50%" id="infoMsgCount_title">评论区(0)</li>
            </ul>
            <div class="layui-tab-content">
                <!--正文选项卡内容-->
                <div class="layui-tab-item layui-show">
                    <pre id="infoContent" class="layui-elem-quote layui-quote-nm"></pre>
                </div>
                <!--评论区内容-->
                <div class="layui-tab-item">
                    <fieldset class="layui-elem-field layui-field-title layui-col-sm12">
                        <legend style="padding-bottom: 10px"><a id="infoMsgCount">游戏评论(当前游戏有0条评论)</a>
                        </legend>
                        <div id="msgContent_box">
                            <textarea id="msgContent" placeholder="说说你对这篇文章的看法吧" class="layui-textarea"></textarea>
                        </div>
                        <br/>
                        <button type="button" id="pl_btn" onclick="postMsg();"
                                class="layui-btn layui-btn-danger layui-btn-fluid bg_color">发表评论
                        </button>
                        <br/>
                        <br/>
                        <div id="infoMsgList"></div>
                        <div id="infoMsgListLimit"></div>
                    </fieldset>
                </div>
            </div>
        </div>

    </div>
</div>


<script src="../layui/layui.js"></script>
<script src="../layui/lay/modules/jquery-3.3.1.js"></script>
<script src="../layui/jquery.cookie.js"></script>
<script src="../backstage_web/html_js/utf.js"></script>
<script>
    layui.use(['layer', 'form', 'element','laypage'], function () {
        var layer = layui.layer;
        var form = layui.form;
        var element = layui.element;//切换选项卡组件
        var $ = layui.jquery;
        var router = layui.router();
        var laypage = layui.laypage;

        var infoId = router.search.infoId;//从url获取到的infoId
        var loginId_p=$.cookie('loginId');//获取cookie

        //登陆验证
        $(document).ready(function () {
            if (loginId_p==null||loginId_p=='null') {//判断是否登陆 =null=没登陆
                $('#msgContent').attr("placeholder","您当前尚未登陆,暂时无法评论.请返回首页登陆后在评论!");//更新提示语
                $('#msgContent').attr("disabled","disabled");//禁用评论标签输入
                $("#pl_btn").removeClass("layui-btn-danger").addClass("layui-btn-disabled");//关闭评论按钮
                $("#pl_btn").removeClass("bg_color");//移除颜色
                $("#pl_btn").attr("onclick",null);//关闭评论按钮调用函数
            }
        })

        $.get("/games_info_sys/info/selectGameInfoById.do?infoId="+infoId,function (res) {
            $('#infoTitle').append(res.infoTitle);
            $('#infoAuthor').append('作者:'+res.infoAuthor);
            $('#infoSource').append('来源:'+res.infoSource);
            $('#infoTime').append('发布时间:'+res.infoTime);
            $('#infoContent').append(res.infoContent);
        })

        //获取留言总数
        $.get("/games_info_sys/msg/getGamesMsgCount.do?msgBelong=info"+infoId,function (res) {
            infoMsgCount = res;//当前游戏留言条数
            $('#infoMsgCount').text('文章评论(当前文章有' + infoMsgCount + '条评论)');
            $('#infoMsgCount_title').text('评论区(' + infoMsgCount + ')');
            //分页组件
            laypage.render({
                elem: 'infoMsgListLimit'
                ,count: infoMsgCount//数据总数，从服务端得到
                ,theme: '#23262E'
                ,jump:function (obj,first) {
                    $('#infoMsgList').empty();
                    //获取需要显示的当前游戏评论信息
                    $.get("/games_info_sys/msg/selectMsgsLimitByGid.do?msgBelong=info" + infoId+'&page='+obj.curr, function (res) {
                        //遍历显示data中的留言数据
                        layui.each(res.data, function (index, item) {
                            $('#infoMsgList').append('<fieldset class="layui-elem-field">\n' +
                                '                                        <legend style="font-size:15px">' + item.msgAuthor + '</legend>\n' +
                                '                                        <legend style="font-size:5px">' + item.msgTime + '</legend>\n' +
                                '                                        <div class="layui-field-box" style="padding-left: 30px">\n' +
                                '                                            ' + item.msgContent + '\n' +
                                '                                        </div>\n' +
                                '                                    </fieldset>\n');
                        });
                    })
                }
            });
        })

        //点击发表评论按钮发送数据
        window.postMsg = function () {
            //点击过后立即关闭
            $("#pl_btn").removeClass("layui-btn-danger").addClass("layui-btn-disabled");
            //将获取到的数据组装成JSON字符串
            var gameMsg = {
                "msgContent": $('#msgContent').val(),
                "msgTime": getNowTime(),
                "msgAuthor": utf8to16(atob(loginId_p)).substring(8,utf8to16(atob(loginId_p)).length),
                "msgBelong": 'info'+infoId
            };
            $.ajax({
                url: "/games_info_sys/publicUser/insertMsg.do",
                type: "POST",
                contentType: "application/json",
                data: JSON.stringify(gameMsg),
                success: function (res) {
                    layer.msg(res.msg);
                    $('#infoMsgCount').text('游戏评论(当前游戏有' + res.count + '条评论)');
                    $('#infoMsgCount_title').text('游戏评论(' + res.count + ')');//更新评论总数
                    $("#pl_btn").removeClass("layui-btn-disabled").addClass("layui-btn-danger");//按钮恢复正常
                    $('#msgContent_box').load("detail_info_page.html #msgContent");
                    //在顶部追加新评论
                    if(res.msg=="评论成功") {
                        $('#infoMsgList').prepend('<fieldset class="layui-elem-field">\n' +
                            '                                        <legend style="font-size:15px">' + gameMsg.msgAuthor + '</legend>\n' +
                            '                                        <legend style="font-size:5px">' + gameMsg.msgTime + '</legend>\n' +
                            '                                        <div class="layui-field-box" style="padding-left: 30px">\n' +
                            '                                            ' + gameMsg.msgContent + '\n' +
                            '                                        </div>\n' +
                            '                                    </fieldset>\n');
                    }
                },
                error: function () {
                    layer.msg("评论提交出错,请检查网络并刷新");
                    $("#pl_btn").attr("disabled", "disabled");//禁用按钮
                }
            });
        }

        //获取当前时间字符串
        function getNowTime() {
            var myDate = new Date;
            var year = myDate.getFullYear(); //获取当前年
            var mon = myDate.getMonth() + 1; //获取当前月
            var date = myDate.getDate();//获取当前日
            var h = myDate.getHours();//获取当前小时数(0-23)
            var m = myDate.getMinutes();//获取当前分钟数(0-59)
            var nowTime = year + '-' + mon + '-' + date + '  ' + h + ':' + m;
            return nowTime;
        }

    })
</script>
</body>
</html>